<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>产品详情页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-item.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-zoom.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
</head>

<body>

<!--页面顶部 开始-->
<#include "top.ftl">
<#assign attrList=goodsDesc.customAttributeItems?eval>
<#assign imgList=goodsDesc.itemImages?eval>
<#assign specList=goodsDesc.specificationItems?eval>
<!--页面顶部 结束-->
<div class="py-container">
    <div id="item">
        <div class="crumb-wrap">
            <ul class="sui-breadcrumb">
                <li>
                    <a href="#">手机、数码、通讯</a>
                </li>
                <li>
                    <a href="#">手机</a>
                </li>
                <li>
                    <a href="#">Apple苹果</a>
                </li>
                <li class="active">iphone 6S系类</li>
            </ul>
        </div>
        <!--product-info-->
        <div class="product-info">
            <div class="fl preview-wrap">
                <!--放大镜效果-->
                <div class="zoom">
                    <!--默认第一个预览-->
                    <div id="preview" class="spec-preview">
                        <span class="jqzoom"><img style="width: 400px; height: 550px" jqimg="${imgList[0].url}"
                                                  src="${imgList[0].url}"/></span>
                    </div>
                    <!--下方的缩略图-->
                    <div class="spec-scroll">
                        <a class="prev">&lt;</a>
                        <!--左右按钮-->
                        <div class="items">
                            <ul>
                                <#list imgList as img >
                                    <li><img src="${img.url}" bimg="${img.url}" onmousemove="preview(this)"/></li>
                                </#list>
                            </ul>
                        </div>
                        <a class="next">&gt;</a>
                    </div>
                </div>
            </div>
            <div class="fr itemInfo-wrap">
                <div class="sku-name">
                    <h4 id="sku-name">${goods.goodsName}</h4>
                </div>
                <div class="news"><span>选择移动</span></div>
                <div class="summary">
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>价　　格</i>
                        </div>
                        <div class="fl price">
                            <i>¥</i>
                            <em id="sku-price">${goods.price}</em>
                            <span>降价通知</span>
                        </div>
                        <div class="fr remark">
                            <i>累计评价</i><em>612188</em>
                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>促　　销</i>
                        </div>
                        <div class="fl fix-width">
                            <i class="red-bg">加价购</i>
                            <em class="t-gray" id="sku-caption">${goods.caption}</em>
                        </div>
                    </div>
                </div>
                <div class="support">
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>支　　持</i>
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em>
                        </div>
                    </div>
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>配 送 至</i>
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                        </div>
                    </div>
                </div>
                <div class="clearfix choose">
                    <div id="specification" class="summary-wrap clearfix">
                        <#list specList as spec>
                            <dl>
                                <dt>
                                    <div class="fl title">
                                        <i>${spec.attributeName}</i>
                                    </div>
                                </dt>
                                <#list spec.attributeValue as attr>
                                    <dd><a name="attr"
                                           href="javascript:attrImg('${spec.attributeName}','${attr}');">${attr}<span
                                                    title="点击取消选择">&nbsp;</span></a></dd>
                                </#list>
                            </dl>
                        </#list>
                    </div>

                    <div class="summary-wrap">
                        <div class="fl title">
                            <div class="control-group">
                                <div class="controls">
                                    <input autocomplete="off" id="sum" type="text" value="1" minnum="1" class="itxt"/>
                                    <a href="javascript:math(1)" class="increment plus">+</a>
                                    <a href="javascript:math(-1)" class="increment mins">-</a>
                                </div>
                            </div>
                        </div>
                        <div class="fl">
                            <ul class="btn-choose unstyled">
                                <li>
                                    <a href="JavaScript:cartSub()" class="sui-btn  btn-danger addshopcar">加入购物车</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--product-detail-->
        <div class="clearfix product-detail">
            <div class="fl aside">
                <ul class="sui-nav nav-tabs tab-wraped">
                    <li class="active">
                        <a href="#index" data-toggle="tab">
                            <span>相关分类</span>
                        </a>
                    </li>
                    <li>
                        <a href="#profile" data-toggle="tab">
                            <span>推荐品牌</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content tab-wraped">
                    <div id="index" class="tab-pane active">
                        <ul class="part-list unstyled">
                            <li>手机</li>
                            <li>手机壳</li>
                            <li>内存卡</li>
                            <li>Iphone配件</li>
                            <li>贴膜</li>
                            <li>手机耳机</li>
                            <li>移动电源</li>
                            <li>平板电脑</li>
                        </ul>
                        <ul class="goods-list unstyled">
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part01.png"/>
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part02.png"/>
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part03.png"/>
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part02.png"/>
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="img/_/part03.png"/>
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>6088.00</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="profile" class="tab-pane">
                        <p>推荐品牌</p>
                    </div>
                </div>
            </div>
            <div class="fr detail">
                <div class="clearfix fitting">
                    <h4 class="kt">选择搭配</h4>
                    <div class="good-suits">
                        <div class="fl master">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/_/l-m01.png"/>
                                </div>
                                <em>￥5299</em>
                                <i>+</i>
                            </div>
                        </div>
                        <div class="fl suits">
                            <ul class="suit-list">
                                <li class="">
                                    <div id="">
                                        <img src="img/_/dp01.png"/>
                                    </div>
                                    <i>Feless费勒斯VR</i>
                                    <label data-toggle="checkbox" class="checkbox-pretty">
                                        <input type="checkbox"><span>39</span>
                                    </label>
                                </li>
                                <li class="">
                                    <div id=""><img src="img/_/dp02.png"/></div>
                                    <i>Feless费勒斯VR</i>
                                    <label data-toggle="checkbox" class="checkbox-pretty">
                                        <input type="checkbox"><span>50</span>
                                    </label>
                                </li>
                                <li class="">
                                    <div id=""><img src="img/_/dp03.png"/></div>
                                    <i>Feless费勒斯VR</i>
                                    <label data-toggle="checkbox" class="checkbox-pretty">
                                        <input type="checkbox"><span>59</span>
                                    </label>
                                </li>
                                <li class="">
                                    <div id=""><img src="img/_/dp04.png"/></div>
                                    <i>Feless费勒斯VR</i>
                                    <label data-toggle="checkbox" class="checkbox-pretty">
                                        <input type="checkbox"><span>99</span>
                                    </label>
                                </li>
                            </ul>
                        </div>
                        <div class="fr result">
                            <div class="num">已选购0件商品</div>
                            <div class="price-tit"><strong>套餐价</strong></div>
                            <div class="price">￥5299</div>
                            <button class="sui-btn  btn-danger addshopcar">加入购物车</button>
                        </div>
                    </div>
                </div>
                <div class="tab-main intro">
                    <ul class="sui-nav nav-tabs tab-wraped">
                        <li class="active">
                            <a href="#one" data-toggle="tab">
                                <span>商品介绍</span>
                            </a>
                        </li>
                        <li>
                            <a href="#two" data-toggle="tab">
                                <span>规格与包装</span>
                            </a>
                        </li>
                        <li>
                            <a href="#three" data-toggle="tab">
                                <span>售后保障</span>
                            </a>
                        </li>
                        <li>
                            <a href="#four" data-toggle="tab">
                                <span>商品评价</span>
                            </a>
                        </li>
                        <li>
                            <a href="#five" data-toggle="tab">
                                <span>手机社区</span>
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="tab-content tab-wraped">
                        <div id="one" class="tab-pane active">
                            <ul class="goods-intro unstyled">
                                <#list attrList as atr>
                                    <li>${atr.text}：${atr.value}</li>
                                </#list>
                            </ul>
                            <div class="intro-detail">
                                ${goodsDesc.introduction}
                            </div>
                        </div>
                        <div id="two" class="tab-pane">
                            <p>${goodsDesc.packageList}</p>
                        </div>
                        <div id="three" class="tab-pane">
                            <p>${goodsDesc.saleService}</p>
                        </div>
                        <div id="four" class="tab-pane">
                            <div id="getConment">

                            </div>
                            <div>
                                <form id="page">
                                    <a href="javascript:toPage(1)">首页</a>
                                    <a href="javascript:toPage(2)">上一页</a>
                                    第<input type="text" id="pageNum" size="1px" readonly="readonly">页/
                                    共<input type="text" id="pages" size="1px" disabled="disabled">页/
                                    共<input type="text" id="total" size="1px" disabled="disabled">条
                                    <a href="javascript:toPage(3)">下一页</a>
                                    <a href="javascript:toPage(4)">尾页</a>
                                </form>
                            </div>

                        </div>
                        <div id="five" class="tab-pane">
                            <p>手机社区</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--like-->
        <div class="clearfix"></div>
        <div class="like">
            <h4 class="kt">猜你喜欢</h4>
            <div class="like-list">
                <ul class="yui3-g">
                    <li class="yui3-u-1-6">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/_/itemlike01.png"/>
                            </div>
                            <div class="attr">
                                <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>3699.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有6人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-6">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/_/itemlike02.png"/>
                            </div>
                            <div class="attr">
                                <em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4388.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-6">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/_/itemlike03.png"/>
                            </div>
                            <div class="attr">
                                <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-6">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/_/itemlike04.png"/>
                            </div>
                            <div class="attr">
                                <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-6">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/_/itemlike05.png"/>
                            </div>
                            <div class="attr">
                                <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-6">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/_/itemlike06.png"/>
                            </div>
                            <div class="attr">
                                <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 底部栏位 -->

<!--页面底部  开始 -->
<#include "desc.ftl">
<!--页面底部  结束 -->
</body>
<script>
    $(function () {
        getConment()
    })

    function updateZan(id) {
        $.ajax({
              url: "http://localhost:9092/conment/updataZan?id=" + id,
              //data: {pageNum:p,rank:$("#rank").val()},
              type: "post",
              dataType: "json",
              async: false,
              success: function (result) {
                  if (result.code == "666") {
                      console.log(result.message)
                  } else {
                      alert(result.message)
                  }
              },
              error: function () {
                  alert("系统异常")
              }
          })
    }

    function getConment(p) {
        $.ajax({
            url: "http://localhost:9092/conment/findAll",
            data: {pageNum: p, rank: $("#rank").val()},
            type: "post",
            dataType: "json",
            async: false,
            success: function (result) {
                if (result.code == "666") {
                    var list = result.data.rows
                    console.log(list)
                    var html = '<input type="text" id="rank"><input onclick="getConment()" type="button" value="搜素">';
                    html += '<table border="1">'
                    html += '<tr>'
                    html += '<th>评论用户</th>'
                    html += '<th>评级</th>'
                    html += '<th>内容</th>'
                    html += '<th>时间</th>'
                    html += '<th>点赞数量</th>'
                    html += '<th>商品id</th>'
                    html += '<th>商品图片</th>'
                    html += '<th>操作</th>'
                    html += '</tr>'
                    $(list).each(function (i, e) {
                        html += '<tr>'
                        html += '<td>' + e.userId + '</td>'
                        html += '<td>' + e.rank + '</td>'
                        html += '<td>' + e.message + '</td>'
                        html += '<td>' + e.nowDate + '</td>'
                        html += '<td>' + e.zan + '</td>'
                        html += '<td>' + e.userId + '</td>'
                        html += '<td><img style="height: 40px" width="40px" src="' + e.imgUrl + '"></td>'
                        html += '<td><button onclick="updateZan(' + "'" + e.id + "'" + ')">点赞</button></td>'
                        html += '</tr>'
                    })
                    html += '</table>'
                    // 分页
                    $("#pageNum").val(result.data.pageNum);
                    $("#pages").val(result.data.pages);
                    $("#total").val(result.data.total);
                    $("#getConment").html(html);
                } else {
                    alert(result.message)
                }
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //分页
    function toPage(id) {
        var num = parseInt($("#pageNum").val());
        var pages = parseInt($("#pages").val());
        var p = num;
        if (id == 1) {
            p = 1;
            $("#pageNum").val(1);
        }
        if (id == 2) {
            if (num == 1) {
                alert("已经到达首页了");
                return;
            }
            p = num - 1;
            $("#pageNum").val(num - 1);
        }
        if (id == 3) {
            if (num == pages) {
                alert("已经到达尾页了");
                return;
            }
            p = num + 1;
            $("#pageNum").val(num + 1);
        }
        if (id == 4) {
            p = pages;
            $("#pageNum").val(pages);
        }
        getConment(p);
    }

    var itemId = -1
    var itemList = [
        <#list itemList as item>
        {
            id: ${item.id?c},
            title: '${item.title}',
            sellPoint: '${item.sellPoint}',
            price: ${item.price?c},
            spec: ${item.spec}
        },
        </#list>
    ]

    var map = {}

    function attrImg(key, value) {
        map[key] = value;
        var list = Object.values(map);
        $("[name=attr]").each(function (i, e) {
            if (list.indexOf($(e).text().trim()) >= 0) {
                $(e).attr('class', 'selected')
            } else {
                $(e).attr('class', '')
            }
        })

        $(itemList).each(function (i, e) {
            if (ifMap(map, e.spec)) {
                $("#sku-name").html(e.title)
                $("#sku-price").html(e.price)
                $("#sku-caption").html(e.caption)
                itemId = e.id
            }
        })
    }

    function ifMap(map1, map2) {
        var v1 = Object.values(map1);
        var v2 = Object.values(map2);
        if (v1.length != v2.length) {
            return false;
        }
        for (var m in map1) {
            if (map1[m] != map2[m]) {
                return false;
            }
        }
        return true;
    }

    var sum = 1;

    function math(num) {
        sum += num
        if (sum <= 1) {
            $("#sum").val(1)
            sum = 1
            return
        }
        $("#sum").val(sum)
    }

    function cartSub() {
        if (itemId < 0) {
            alert("请选择规格")
            return
        }
        location.href = "http://localhost:9092/cart/addCart?itemId=" + itemId + "&num=" + $("#sum").val();
        alert("加入成功")
    }
</script>
</html>